<template>
	<view class="page-news">
		<!-- 		<view class="delBatch">
			<el-row>
				<el-button type="danger">批量删除</el-button>
			</el-row>
		</view> -->
		<view class="new_push" v-if="userList.userAdmin === 'useradmin' ||  userList.username != null">
			<el-row>
				<el-button type="primary" icon="el-icon-plus" circle @click="handleAdd()"></el-button>
			</el-row>
		</view>
		<view class="line" v-for="(item,index) in dataList.records" :key="item.id">
			<view class="page-list-top">
				<view class="page-list" @tap="into(item.id)">
					<view>
						<image :src="item.pic"></image>
					</view>
					<view class="text">
						<view class="title">{{item.title}}</view>
						<view class="src">{{item.src}}</view>
						<view class="time">发布时间: {{item.time}}</view>

					</view>
				</view>

				<view class="el-but">

					<el-row v-if="userList.userAdmin === 'useradmin'">
						<el-button icon="el-icon-close" circle @tap="RemoveNews(item.id)"></el-button>
					</el-row>

					<el-row v-if="userList.userAdmin === 'useradmin'">
						<el-button icon="el-icon-setting" circle @tap="handleEdit(item.id)"></el-button>
					</el-row>

					<el-row v-if="userList.username != null">
						<el-button icon="el-icon-chat-dot-round" circle @tap="remark(item.id)"></el-button>
					</el-row>
				</view>
			</view>

		</view>
		<el-dialog title="新闻信息" :visible.sync="dialogFormVisible" width="100%">
			<el-form label-width="80px" size="small">
				<el-form-item label="频道">
					<el-select clearable v-model="form.channel" placeholder="请选择频道" style="width: 100%">
						<el-option v-for="item in options" :key="item.id" :label="item.result" :value="item.result">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题">
					<el-input v-model="form.title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="时间">
					<el-input v-model="form.time" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="发布者">
					<el-input v-model="form.src" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-input v-model="form.category" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="图片链接">
					<el-input v-model="form.pic" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="内容">
					<div id="richText"></div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save()">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="评论" :visible.sync="remarkVisible" width="95%">

			<template>
				<view>
					<!-- 评论列表 -->
					<scroll-view class="comments-list" scroll-y="true">
						<view v-for="comment in comments" class="comment-item">
							<view>
								<image class="avatar" :src="comment.avatarUrl"></image>
							</view>
							<view class="comment-body">
								<view class="comment-header">
									<text class="nickname">{{ comment.nickname }}</text>
									<!-- <text class="time"> {{ comment.createTime }}</text> -->
								</view>
								<view class="comment-content">
									<view>{{ comment.content }}</view>
								</view>
								<!-- 回复区域 -->
								<view class="reply-list">
									<view v-for="reply in comment.children" class="reply-item">
										<image class="reply-avatar" :src="reply.avatarUrl"></image>
										<text class="reply-nickname">{{ reply.nickname }} ▶ {{reply.pnickname}}</text>
										<!-- <text class="reply-nickname">{{ reply.createTime }}</text> -->
										<view class="reply-text">{{ reply.content }}</view>
										<view class="comment-reply">
											<view class="reply-button" @tap="onReply(reply)">回复</view>
											<view class="reply-delete" @tap="onDelete(reply.id)"
												v-if="reply.userid == userList.id || userList.username === 'admin'">删除
											</view>
										</view>
									</view>

								</view>
							</view>
							<view class="comment-actions">
								<view>
									<image class="like-icon" :src="comment.isLiked ? likeActiveIcon : likeIcon"
										@tap="onLike(comment)">
									</image>
									<text class="like-count">{{ comment.likeCount }}</text>
								</view>
								<view class="comment-reply">
									<view class="reply-button" @tap="onReply(comment)">回复</view>
									<view class="reply-delete" @tap="onDelete(comment.id)"
										v-if="comment.userid == userList.id || userList.username === 'admin'">删除
									</view>
								</view>
							</view>
						</view>
						<view v-if="comments.length === 0" class="remarknull">期待你的评论哦！</view>
					</scroll-view>
					<!-- 评论输入框 -->
					<view class="comment-input">
						<input class="comment-inputer" :placeholder="text" v-model="commentInput"
							@click="showboard()"></input>
						<button class="comment-submit" @click="onCommentSubmit()">发送</button>
					</view>
				</view>
			</template>

		</el-dialog>

		<view style="text-align: center;">页面到底了...☺</view>
	</view>
</template>
<script>
	import E from "wangeditor"
	let editor;

	export default {
		props: ['dataList', 'userList'],
		data() {
			return {
				form: {},
				dialogFormVisible: false,
				remarkVisible: false,
				options: [],
				pageNum: 1,
				pageSize: 40,
				comments: [],
				channelId: null,
				// -------评论 ------
				likeIcon: '/static/like.png',
				likeActiveIcon: '/static/like-active.png',
				commentInput: '',
				text: '说点什么...',
				pid: null
			}
		},

		onLoad() {
			this.load()
		},

		methods: {


			// //这样页面就会刷新了
			// Refresh() {
			// 	// this.$router.go(0)
			// 	location.reload()
			// },


			showboard() {
				uni.showKeyboard({
					success() {
						console.log('键盘已打开')
					}
				})
			},

			into(id) {
				console.log('id', id)
				if (id != null) {
					uni.navigateTo({
						url: `/pages/news/webview?Id=${id}`
					})
				} else {
					uni.showToast({
						title: '暂无数据',
						icon: 'error',
						duration: 2000
					})
				}

			},
			//新增
			handleAdd() {
				this.request.get("/nav").then((res) => {
					this.options = res.data;
				});
				this.dialogFormVisible = true;
				this.form = {};

				// this.$nextTick方法允许你在下次DOM更新循环结束后执行回调函数
				this.$nextTick(() => {
					if (!editor) {
						editor = new E("#richText")
						// 上传图片
						editor.config.uploadImgServer = 'http://localhost:9090/file/uploadImg'
						editor.config.uploadFileName = 'file'
						editor.create()
					}
					//清除内容
					editor.txt.html('')

					if (this.$refs.img) {
						this.$refs.img.clearFiles();
					}
					if (this.$refs.file) {
						this.$refs.file.clearFiles();
					}
				})
			},
			save() {
				this.request.post("/channel", this.form).then((res) => {
					if (res.code === '200') {
						this.$message.success("保存成功");
						this.dialogFormVisible = false;
						setTimeout(res => {
							location.reload()
						}, 2000)

					} else {
						this.$message.error("保存失败");
					}
				});
			},
			//编辑
			handleEdit(newsId) {
				console.log("编辑", newsId);

				this.dialogFormVisible = true;
				this.request.get("/nav").then((res) => {
					this.options = res.data;
				});
				this.request.get("/channel/page", {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						id: newsId
					},
				}).then((res) => {
					if (res.code === "200") {
						console.log("编辑", res)
						this.form = res.data.records[0]


						// this.$nextTick方法允许你在下次DOM更新循环结束后执行回调函数
						this.$nextTick(() => {
							if (!editor) {
								editor = new E("#richText")
								// 上传图片
								editor.config.uploadImgServer = 'http://localhost:9090/file/uploadImg'
								editor.config.uploadFileName = 'file'
								editor.create()
							}
							editor.txt.html(this.form.content)

							console.log('this.$refs', this.$refs.file)
						 if (this.$refs.img) {
								this.$refs.img.clearFiles();
							}
							if (this.$refs.file) {
								this.$refs.file.clearFiles();
							}
						})
					}
				})


			},

			RemoveNews(delId) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success(res) {
						if (res.confirm) {
							uni.request({
								url: 'http://localhost:8081/channel/' + delId,
								method: 'DELETE',
							})

							uni.showToast({
								title: '删除成功',
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000,
							})
							setTimeout(res => {
								location.reload()
							}, 2000)
							console.log('用户点击确定');

						} else if (res.cancel) {
							uni.showToast({
								title: '删除失败',
								icon: 'error',
								duration: 2000
							})
							console.log('用户点击取消');
						}
					}
				});
			},
			// 评论
			remark(id) {
				console.log("评论", id)
				this.channelId = id
				console.log("channelId", this.channelId)
				this.remarkVisible = true

				this.load()
			},

			// 刷新评论数据
			load() {
				this.request.get("/comment/tree/" + this.channelId).then((res) => {
					if (res.code === "200") {
						console.log("评论数据", res)
						this.comments = res.data
					}
				})
			},

			// 点赞
			onLike(comment) {
				console.log('点赞', comment)
				comment.isLiked = !comment.isLiked;
				comment.likeCount += comment.isLiked ? 1 : -1;

				this.request.post("/comment", {
					id: comment.id,
					likeCount: comment.likeCount
				}).then(res => {

				})
			},
			// 回复
			onReply(comment) {
				console.log('comment', comment)
				this.text = '回复@' + comment.nickname
				this.pid = comment.id
				console.log('pid', this.pid)
			},

			// 发表评论
			onCommentSubmit(comment) {
				const now = new Date(); // 创建 Date 对象，包含当前时间
				const yyyy = now.getFullYear(); // 获取当前年份
				const MM = now.getMonth() + 1; // 获取当前月份
				const dd = now.getDate(); // 获取当前日期

				// 拼接成日期时间字符串
				const dateTime = `${yyyy}-${MM}-${dd}`;

				const inputValue = this.commentInput.trim();
				if (!inputValue) {
					return;
				}
				this.request.post("/comment", {
					pid: this.pid,
					channelId: this.channelId,
					// userid: this.userList.id,
					// avatarUrl: this.userList.avatarUrl,
					// nickname: this.userList.nickname,
					// createTime: dateTime,
					content: inputValue,
					isLiked: 0,
					likeCount: 0
				}).then(res => {
					console.log('sss', res)
					if (res.code === '200') {
						this.$message.success("发布成功")
						this.load();
						this.commentInput = ''
					}
				}).catch(err => {
					console.log(err.message); // 查看错误信息
					this.$message.error("发布失败")
				});

				this.commentInput = '';

			},
			onDelete(id) {
				console.log("id", id)
				this.request.delete("/comment/" + id).then(res => {
					if (res.code === '200') {
						this.$message.success("删除成功")
						this.load()
					}
				})
			}
		}
	}
</script>
<style>
	.page-news {
		margin: 20rpx;
	}

	.delBatch {
		position: relative;
		right: 0;
	}

	.new_push {
		z-index: 1;
		top: 564px;
		position: fixed;
		right: 60px;
	}

	.el-but {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.page-list-top {
		display: flex;
	}

	.page-news .page-list {
		display: flex;
		margin: 20rpx 0;
		width: 100%;

	}

	.page-news .page-list image {
		width: 120px;
		height: 100px;
		border-radius: 5px;
	}

	.page-news .page-list .text {
		width: 100%;
		margin-left: 20rpx;
		line-height: 58rpx;
		font-size: 28rpx;
	}

	.page-list .text .title {
		width: 100%;
	}

	.line {
		border-bottom: 1px #ccc solid;
	}

	.page-news .page-list .src {
		color: #909090;
	}

	.page-news .page-list .time {
		color: #aaaaaa;
		font-size: 28rpx;
	}

	.comments-list {
		height: 300px;
		overflow-y: auto;
	}

	.comment-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.reply-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.like-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.like-count {
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	.reply-button {
		font-size: 28rpx;
		color: #4E98F5;
		padding-right: 6px
	}

	.comment-input {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.comment-inputer {
		width: 80%;
		height: 60rpx;
		border: 1rpx solid #ddd;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
	}

	.comment-submit {
		width: 20%;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #4E98F5;
		color: #fff;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.reply-item {
		margin-top: 10px;
	}

	.reply-delete {
		color: #ccc;
	}

	.reply-delete:hover {
		color: #4E98F5;
	}

	.remarknull {
		text-align: center;
		color: #ccc;
	}

	.comment-actions {
		position: absolute;
		right: 0;
	}

	.comment-reply {
		display: flex;
	}

	.comment-content {
		width: 72%;
	}

	.nickname,
	.reply-nickname {
		color: #0000ff;
		padding-bottom: 3px;
	}
</style>
